﻿@model IEnumerable<Capstone_20130302.Models.Product>
@using Capstone_20130302.Constants
@{
    ViewBag.Title = "Products";
    Layout = "~/Views/Shared/_MerchantLayout.cshtml";
    var s = ViewBag.StatusID;
}
<script src="~/Scripts/jquery.dataTables.js"></script>
<script src="~/Scripts/dataTables.bootstrap.js"></script>


<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#example').dataTable({
            "sDom": "<'row spare-down'<'span4'f><'span3'l>r>t<'row'<'span3'i><'span8'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
                "sLengthMenu": "_MENU_ records per page"
            }
        });
        //dung de tao san pham ,phai chon cayegory truoc roi moi tao  san pham sau 
        var categories;
        $.getJSON("/Category/DropDown", function (data) {
            categories = data;
        });
        $("#categories").select2({
            placeholder: "Category",
            width: "element",
            query: function (query) {
                var data = { results: categories };
                query.callback(data);
            }
        });
        function updateProductStatus(pid, stt) {
            $.ajax({
                url: "/Product/UpdateProductStatus",
                type: 'POST',
                data: { productID: pid, status: stt },
                success: function (response) {
                    if (response == "OK") {
                        $('#status-' + pid).text(stt);
                        notify({ title: "Update Success", content: "The status has been updated." });
                    }
                    else {
                        notify({ title: "Fail to Update", content: "The system has fail to update, please try again." });
                    }
                }
            });

            //$('#regisModal').find('input#regis').click();
        }

        $(".changeStatus").change(function () {
            var productID = $(this).data("pid");
            var status = $('#n-status-' + productID + ' option:selected').text();
            updateProductStatus(productID, status);
        });
    });
</script>

<!-- Modal -->
<div id="chooseCate" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="chooseCate" aria-hidden="true">
    <div class="modal-header">
        <h3 id="myModalLabel">Choose a Category</h3>
    </div>
    <div class="modal-body">
        <p>Please choose a Category for your Product, a template will be generated from your selection.</p>
        <input type="hidden" id="categories" />
    </div>
    <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn" aria-hidden="true" onclick='location.href = "/Product/Create?cid="+ $("#categories").val() + "&sid=@ViewBag.sid"'>Continue</button>
    </div>
</div>

@if (Model.ToList().Count > 0)
{
    <!-- Button to trigger modal -->
    <a href="#chooseCate" role="button" class="btn pull-right btn-small" data-toggle="modal">Add New</a>

    <div class="form-inline data-content">
        <table cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered" id="example">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Price)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.TotalLikes)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.TotalBuy)
                    </th>
                    <th>Status
                    </th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>

                @foreach (var item in Model)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.Name)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Price)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TotalLikes)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.TotalBuy)
                        </td>
                        <td data-pid="@item.ProductId" id= "status-@item.ProductId">
                            @Html.DisplayFor(modelItem => item.Status.Name)
                        </td>
                        <td data-pid="@item.ProductId">
                            <a href="Product/Edit/@item.ProductId"><i class="icon-edit"></i> Edit</a>
                            <a href="Product/Id/@item.ProductId"><i class="icon-search"></i> View</a>
                            
                            @*<a href="Product/Delete/@item.ProductId"><i class="icon-trash"></i></a>*@
                            <a 
                                onclick="postToFeed({
                                    method: 'feed',
                                    redirect_uri: 'http://socialbuy.vn:1701/Product/Id/@item.ProductId',
                                    link: 'http://socialbuy.vn:1701/Product/Id/@item.ProductId',
                                    name: '@item.Name',
                                    caption: 'From @item.Store.StoreName',
                                    description: '@item.Description'
                                }); return false;"
                                href=""
                                class=""><i class="icon-facebook"></i> Share</a>
                            @*ojbect attribute :cho them nhung du lieu ma minh muon truyen them vao *@
                            @if (item.StatusId != Constant.STATUS_BANNED && item.Store.StatusId != Constant.STATUS_PENDING && item.Store.StatusId != Constant.STATUS_INACTIVE)
                            {
                                @Html.DropDownListFor(modelItem => item.StatusId, ViewBag.StatusID as SelectList, "- Update -", new { id = "n-status-" + @item.ProductId, @class = "changeStatus span2", data_pid = @item.ProductId })
                            }
                        </td>

                    </tr>
                }
            </tbody>

        </table>
    </div>
}
else
{    
    <div class="dl-message">
        <div class="head">
            <h4>Empty Store</h4>
        </div>
        <div class="body">
            You haven't create any product for this store. Please add a product to your store.
            <br>
            <br>
            <a href="#chooseCate" role="button" class="btn btn-small" data-toggle="modal">Add New Product</a>
        </div>
        <div class="tail"></div>
    </div>
}



<style>
    #chooseCate
    {
        width: 500px;
        margin-left: -200px;
    }

        #chooseCate .modal-body
        {
            padding: 50px 40px 40px 40px;
        }

    .changeStatus
    {
        width: 100px;
    }
</style>

<div id='fb-root'></div>
<script src='http://connect.facebook.net/en_US/all.js'></script>

<script>
    FB.init({ appId: "541295582548776", status: true, cookie: true });

    function postToFeed(obj) {

        // calling the API ...
        function callback(response) {
            document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }
        FB.ui(obj, callback);
    }
</script>
